<!DOCTYPE html>
<!--**
 *Created by wf_H on 2018/8/6.
 *by:web_hwf@sina.com
 *-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>交易管理</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" href="../style/dist/zui@1.8.1/css/zui.min.css">
    <link rel="stylesheet" href="../style/dist/zui@1.8.1/css/zui-theme.css">
    <link rel="stylesheet" href="../style/dist/zui@1.8.1/lib/kindeditor/kindeditor.min.css">
    <link rel="stylesheet" href="../style/dist/hover.css">

    <link rel="stylesheet" href="../style/h-base.css">
    <link rel="stylesheet" href="../style/h-index.css">

    <style>
        form {
            background-color: #ffffff;
            padding: 15px;
            min-height: 500px
        }

        .col-md-6 {
            margin-bottom: 20px;
        }
    </style>
</head>
<body class="childrenBody">


<div class="row">

    <div class="col-md-6">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title" style="float: inherit">表单案例1</div>
        </div>
        <form>
            <div class="form-group">
                <label for="exampleInputAccount1">账号</label>
                <input type="text" class="form-control" id="exampleInputAccount1" placeholder="电子邮件/手机号/用户名">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="">
            </div>
            <div class="form-group">
                <label for="exampleInputMoney1">捐赠金额</label>
                <div class="input-group">
                    <span class="input-group-addon">￥</span>
                    <input type="number" class="form-control" id="exampleInputMoney1" placeholder="最低捐赠金额为 ￥10.00">
                    <span class="input-group-addon">.00</span>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
    <div class="col-md-6">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title" style="float: inherit">表单案例2</div>
        </div>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="exampleInputAccount4" class="col-sm-2">账号</label>
                <div class="col-md-6 col-sm-10">
                    <input type="text" class="form-control" id="exampleInputAccount4" placeholder="电子邮件/手机号/用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword4" class="col-sm-2">密码</label>
                <div class="col-md-6 col-sm-10">
                    <input type="password" class="form-control" id="exampleInputPassword4" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <label for="exampleInputAddress1" class="col-sm-2">地址</label>
                <div class="col-sm-3">
                    <select class="form-control" id="exampleInputAddress1">
                        <option>北京</option>
                        <option>上海</option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="exampleInputAddress2" placeholder="市/县">
                </div>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="exampleInputAddress3" placeholder="详细地址">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <label><input class="h_radio" type="radio" name="radio" > 记住我的选择</label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <label><input class="h_checkbox" type="checkbox" > 记住我的选择</label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-6">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title" style="float: inherit">表单案例3</div>
        </div>
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputEmail3">邮箱</label>
                <input type="text" class="form-control" id="exampleInputEmail3" placeholder="you@me.com">
            </div>
            <div class="form-group">
                <label for="exampleInputInviteCode3">邀请码</label>
                <input type="password" class="form-control" id="exampleInputInviteCode3" placeholder="XXXX-XXXX-XXXX">
            </div>
            <button type="submit" class="btn btn-primary">激活</button>
        </form>
    </div>
    <div class="col-md-6">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title" style="float: inherit">表单案例4</div>
        </div>
        <form class="form-horizontal form-condensed">
            <div class="form-group">
                <label for="exampleInputAccount7" class="col-sm-2">账号</label>
                <div class="col-md-6 col-sm-10">
                    <input type="text" class="form-control" id="exampleInputAccount7" placeholder="电子邮件/手机号/用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword7" class="col-sm-2">密码</label>
                <div class="col-md-6 col-sm-10">
                    <input type="password" class="form-control" id="exampleInputPassword7" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <label for="exampleInputAddress7" class="col-sm-2">地址</label>
                <div class="col-sm-3">
                    <select class="form-control" id="exampleInputAddress7">
                        <option>北京</option>
                        <option>上海</option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="exampleInputAddress8" placeholder="市/县">
                </div>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="exampleInputAddress9" placeholder="详细地址">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> 记住我
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-6">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title" style="float: inherit">表单案例5</div>
        </div>
        <div style="padding: 15px;background-color: #ffffff">
            <textarea id="content" name="content" class="form-control kindeditor1"
                      style="height:450px;">Hello, world!</textarea>
        </div>

    </div>

    <div class="col-md-6">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title" style="float: inherit">表单案例6</div>
        </div>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="1" class="col-sm-2">账号</label>
                <div class="col-md-6 col-sm-10">
                    <textarea id="editor_id" name="content" class="form-control kindeditor2" style="height:450px;">Hello, world!</textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default" onclick="getTextarea()">登录</button>
                </div>
            </div>
        </form>
    </div>


    <div class="col-md-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title" style="float: inherit">表单案例7</div>
        </div>
        <form class="form-horizontal" style="">
            <div class="form-group">
                <label for="exampleInputAccount7" class="col-sm-2">账号</label>
                <div class="col-md-6 col-sm-10">
                    <input type="text" class="form-control" id="exampleInputAccount7" placeholder="电子邮件/手机号/用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword7" class="col-sm-2">密码</label>
                <div class="col-md-6 col-sm-10">
                    <input type="password" class="form-control" id="exampleInputPassword7" placeholder="密码">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="khda_body" style="padding: 0;">
                        <div class="bzt_list">
                            <div class="bzt_item">
                                <div class="h5_text_b">创建客户 <span>时间：2018-01-24</span><span>记录人：陈嘉杰</span></div>
                                <div class="da_list">
                                    <h4>客户基本信息</h4>
                                    <hr>
                                    <div class="row">
                                        <div class="col-xs-6">客户名称：<span>广东省总工会</span></div>
                                        <div class="col-xs-6">联系人： <span>李赟</span></div>
                                        <div class="col-xs-6">客户类型：<span>区域工会类</span></div>
                                        <div class="col-xs-6">联系人电话：<span>13343243244</span></div>
                                        <div class="col-xs-6">拓展人：<span>王敏</span></div>
                                        <div class="col-xs-6">联系人职务：<span>工会主席</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="bzt_item">
                                <div class="h5_text_b">客户访谈 <span>时间：2018-01-24</span><span>记录人：陈嘉杰</span></div>
                                <div class="da_list">
                                    <h4>合作意向业务：补贴、教育培训、电影票券 <span>合作意愿：<i class="color_03">考虑中</i></span></h4>
                                    <hr>
                                    <div class="row">
                                        <div class="col-xs-6">访谈方式：<span>面谈</span></div>
                                        <div class="col-xs-6">预约回访：<span>已预约（2018-11-20）</span></div>
                                        <div class="col-xs-6">访谈内容：<span>从左侧选单点选「Size」来设定你要的图标大小，这也是一般图示网站无法做到的功能。从这里可以调整大小、背景大小</span>
                                        </div>
                                        <div class="col-xs-6">客户顾忌：<span>预设提供 16、32、64、128、256、512 等选项，但也可以透过自定尺寸来输入你需要的大小数值</span>
                                        </div>
                                        <div class="col-xs-12">解决方案：<span>当图标全部自定义完毕，点击右上角的「Download」来将所有图标打包，下载为 PNG 格式，这也是一般会用到的图片格式；假如你是要套用到网站、部落格，可选择「Code」来下载另外一种格式，也就是带有 CSS 程序代码及网页应用，就能试着把图标加入网站使用</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn_gd">
                                    <a href="javascript:;">
                                        更多客户访谈
                                        <span> > </span>
                                        <span> > </span>
                                    </a>
                                </div>
                            </div>
                            <div class="bzt_item">
                                <div class="h5_text_b">签约合作 <span>时间：2018-01-24</span><span>记录人：陈嘉杰</span></div>
                                <div class="da_list">
                                    <h4>签约形式：线下签约 <em>（合同倒计时108天）</em></h4>
                                    <hr>
                                    <div class="row">
                                        <div class="col-xs-12">合作服务项：<b class="color_01">补贴、教育培训、电影票券、每日一课</b></div>
                                        <div class="col-xs-6">合同起止时间：2016年10月10日-2018年10月10日</div>
                                        <div class="col-xs-6"> 补贴收费模式：按单计费</div>
                                        <div class="col-xs-6">合同附件：<a href="javascript:;">xxxxxx</a></div>
                                        <div class="col-xs-6">收费比例：2.5%</div>
                                    </div>
                                </div>
                            </div>
                            <div class="bzt_item">
                                <div class="h5_text_b">合同审核 <span>操作时间：2018-03-21</span><span>操作人：王秋艳</span></div>
                                <div class="da_list">
                                    <h4>审核意见： 审核通过</h4>
                                    <hr>
                                    <div class="row">
                                        <div class="col-xs-12">备注：<span style="margin-left: 45px">当图标全部自定义完毕，点击右上角的「Download」来将所有图标打包，下载为 PNG 格式，这也是一般会用到的图片格式；假如你是要套用到网站、部落格，可选择「Code」来下载另外一种格式，也就是带有 CSS 程序代码及网页应用，就能试着把图标加入网站使用</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bzt_item">
                                <div class="h5_text_b">平台部署 <span>时间：2018-01-24</span><span>操作人：陈嘉杰</span></div>
                                <div class="da_list">
                                    <h4>开通业务权限：补贴、教育培训、票券</h4>
                                    <hr>
                                    <div class="row">
                                        <div class="col-xs-6">平台名称：广东职工教育网管理平台</div>
                                        <div class="col-xs-6">总管理员账号：zhangdada</div>
                                        <div class="col-xs-6">前台域名：<a
                                                href="http://www.gdzgjy.com">http://www.gdzgjy.com</a></div>
                                        <div class="col-xs-6">总管理员姓名：张小杰</div>
                                        <div class="col-xs-6">总管理员手机：1324324324</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div style="text-align: center">
                            <button class="btn btn_add btn-lg" style="padding: 10px 50px">返回</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-6">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title" style="float: inherit">表单案例8</div>
        </div>
        <form class="form-horizontal" style="">
            <div class="khda_body" style="padding: 0;">
                <div class="bzt_list">
                    <div class="bzt_item">
                        <div class="h5_text_b">创建客户 <span>时间：2018-01-24</span><span>记录人：陈嘉杰</span></div>
                        <div class="da_list" style="border: 0;padding: 30px">
                            <div class="form-group">
                                <div class="col-md-6 col-sm-10">
                                    <input type="text" class="form-control" id="exampleInputAccount7"
                                           placeholder="电子邮件/手机号/用户名">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-10">
                                    <div class="input-group">
                                        <input type="text" class="form-control">
                                        <span class="input-group-btn">
                                        <button class="btn btn-primary" type="button">搜索</button>
                                      </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="bzt_item">
                        <div class="h5_text_b">客户访谈 <span>时间：2018-01-24</span><span>记录人：陈嘉杰</span></div>
                        <div class="da_list" style="border: 0;padding: 30px">
                            <button type="button" class="btn btn-primary" data-tip-class="tooltip-primary"
                                    data-toggle="tooltip" data-placement="top"
                                    title="左侧提示内容左侧提示内容左侧提示内容左侧提示内容左侧提示内容左侧提示内容左侧提示内容">左侧提示
                            </button>
                        </div>
                    </div>
                    <div class="bzt_item">
                        <div class="h5_text_b">签约合作 <span>时间：2018-01-24</span><span>记录人：陈嘉杰</span></div>
                        <div class="da_list" style="border: 0;padding: 30px">
                            <div class="form-group">
                                <div class="col-md-6 col-sm-10">
                                    <select class="form-control" id="exampleInputAddress7">
                                        <option>默认模板</option>
                                        <option>上海</option>
                                    </select>
                                </div>
                                <div class="col-md-4 col-sm-10">
                                    <a href="javascript:;" class="btn btn-link" id="btn_01">查看模板样例</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-10">
                                    <input type="password" class="form-control" id="exampleInputPassword7"
                                           placeholder="密码">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bzt_item">
                        <div class="h5_text_b">复选框 <span>时间：2018-01-24</span><span>记录人：陈嘉杰</span></div>
                        <div class="da_list" style="border: 0;padding: 30px">
                            <div class="form-group">
                                <div class="col-md-3 col-sm-3">
                                    <input type="checkbox" name="checkbox_01" id="checkbox_01">
                                    <label for="checkbox_01">记住我</label>
                                </div>
                                <div class="col-md-3 col-sm-3">
                                    <input type="checkbox" name="checkbox_01" id="checkbox_02">
                                    <label for="checkbox_02">记住我</label>
                                </div>
                                <div class="col-md-3 col-sm-3">
                                    <input type="checkbox" name="checkbox_01" id="checkbox_03">
                                    <label for="checkbox_03">记住我</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-12 col-sm-12">
                                    <input type="checkbox" name="checkbox_01" id="checkbox_04">
                                    <label for="checkbox_04">记住我</label>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <input type="checkbox" name="checkbox_01" id="checkbox_05">
                                    <label for="checkbox_05">记住我</label>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <input type="checkbox" name="checkbox_01" id="checkbox_06">
                                    <label for="checkbox_06">记住我</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bzt_item">
                        <div class="h5_text_b">单选 <span>时间：2018-01-24</span><span>记录人：陈嘉杰</span></div>
                        <div class="da_list" style="border: 0;padding: 30px">
                            <div class="form-group">
                                <div class="col-md-3 col-sm-3">
                                    <input type="radio" name="radio_01" id="radio_01">
                                    <label for="radio_01">记住我</label>
                                </div>
                                <div class="col-md-3 col-sm-3">
                                    <input type="radio" name="radio_01" id="radio_02">
                                    <label for="radio_02">记住我</label>
                                </div>
                                <div class="col-md-3 col-sm-3">
                                    <input type="radio" name="radio_01" id="radio_03">
                                    <label for="radio_03">记住我</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-12 col-sm-12">
                                    <input type="radio" name="radio_01" id="radio_04">
                                    <label for="radio_04">记住我</label>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <input type="radio" name="checkbox_01" id="radio_05">
                                    <label for="radio_05">记住我</label>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <input type="radio" name="radio_01" id="radio_06">
                                    <label for="radio_06">记住我</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="text-align: center">
                    <button class="btn btn_add btn-lg" style="padding: 10px 50px">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>


<!-- 查看模板样例弹窗 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal_body modal-sm">
        <div class="modal-content">
            <button type="button" style="margin: 10px;" class="close" data-dismiss="modal"><span
                    aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
            <img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/loading.svg" alt="" width="100">
        </div>
    </div>
</div>


<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../style/dist/zui@1.8.1/js/zui.min.js"></script>
<script type="text/javascript" src="../style/dist/zui@1.8.1/lib/kindeditor/kindeditor.min.js"></script>
<!--复选美化-->
<script type="text/javascript" src="../style/dist/icheck.min.js"></script>
<script>

    /*======================================================
    *@author wf_Huang
    *@Time 2018/8/15 16:51
    *=======================================================
    *@function  初始化富文本编辑器
    *=====================================================*/
    window.editor1 = KindEditor.create('textarea.kindeditor1', { //kindeditor1  对应的富文本编辑器的class 名称
        basePath: '/dist/lib/kindeditor/',
        allowFileManager: true,
        bodyClass: 'article-content'
    });
    window.editor2 = KindEditor.create('textarea.kindeditor2', {
        basePath: '/dist/lib/kindeditor/',
        allowFileManager: true,
        bodyClass: 'article-content'
    });

    function getTextarea() {  //里面为获取富文本编辑器的内容
        editor2.sync();
        var ahtml = editor2.html();
        console.log(ahtml);
    }

    //同样的初始化赋值给富文本编辑器
    editor1.html('<p>手动初始化内容</p>');


    //表单八使用
    $('[data-toggle="tooltip"]').tooltip();


    /*========================查看模板样例=================================*/
    $('#btn_01').click(function () {
        $('#myModal').modal('show', 'fit')

//            $('#myModal').modal('hide', 'fit') //关闭弹窗
    })
</script>
</body>
</html>